<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="js/jquery-1.12.4.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $.ajax({
                url: '/res/get',
                dataType: 'json',
                success: function (result) {
                    console.log(result);
                    createMenu(result);
                },
                error: function (xhr) {
                    alert('error');
                    console.log(xhr);
                }
            })

            function createMenu(result) {
                var html = '<nav class="navbar navbar-default" role="navigation">' +
                '<div class="container-fluid">' +
                '<div class="navbar-header">' +
                '<a class="navbar-brand" href="#">菜鸟教程</a>' +
                '</div>' +
                '<div>' +
                '<ul class="nav navbar-nav">';
                // '<li class="active"><a href="#">iOS</a></li>' +
                // '<li><a href="#">SVN</a></li>' +
                for(var i = 0; i < result.data.length; i++) {
                    var parent = result.data[i];
                    if(parent.pid == 0) {
                        html += '<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">';
                        html += parent.name;
                        html += '<b class="caret"></b></a>';
                        html += '<ul class="dropdown-menu">';
                        for(var j = 0; j < result.data.length; j++) {
                            var child = result.data[j];
                            if(child.pid == parent.id) {
                                html += '<li><a href="'+child.url+'">' + child.name + '</a></li>';
                            }
                        }
                        html +='</ul>';
                        html+='</li>';
                    }
                }
                html += '<li class="dropdown">' +
                '<a href="#" class="dropdown-toggle" data-toggle="dropdown">' +
                'Java' +
                '<b class="caret"></b>' +
                '</a>' +
                '<ul class="dropdown-menu">' +
                '<li><a href="#">jmeter</a></li>' +
                '<li><a href="#">EJB</a></li>' +
                '<li><a href="#">Jasper Report</a></li>' +
                '<li class="divider"></li>' +
                '<li><a href="#">分离的链接</a></li>' +
                '<li class="divider"></li>' +
                '<li><a href="#">另一个分离的链接</a></li>' +
                '</ul>' +
                '</li>' +
                '</ul>' +
                '</div>' +
                '</div>';
                html += '<div class="container-fluid">' +
                    '<div class="navbar-header">' +
                    '<a class="navbar-brand" href="/logout">注销</a>' +
                    '</div>' +
                    '<div>';
                '</nav>';
                $("#content").html(html);
            }

        });
    </script>
</head>
<body>
<h1>欢迎光临</h1>
<div id="content"></div>
</body>
</html>